<!--
 * @Description: 接触网设备基础
 * @Author: Huang Junjie
 * @Date: 2021-10-19 15:04:01
 * @LastEditTime: 2021-10-21 02:21:00
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="content-card">
    <!-- 标题 -->
    <div class="title">
      接触网设备基础
      <i class="el-icon-more" @click="gotoUrl('cdtye-itps-jcw-data-center', '接触网')" />
    </div>
    <!-- 标题 -->

    <!-- 统计 -->
    <div class="statistics-content">
      <div class="item" style="border-right: 1px solid #ebebeb;">
        <div class="circle" style="background-color: #2db7f5;" />
        <div class="inner-item">
          <div class="span">设备总资产</div>
          <div class="num">{{ statisticsData.total }}</div>
        </div>
      </div>
      <div class="item">
        <div class="inner-item">
          <div class="span">锚段总数（个）</div>
          <div class="num">{{ statisticsData.anchors }}</div>
        </div>
      </div>
      <div class="item">
        <div class="inner-item">
          <div class="span">支柱总数（个）</div>
          <div class="num">{{ statisticsData.pillars }}</div>
        </div>
      </div>
      <div class="item">
        <div class="inner-item">
          <div class="span">关键设备（个）</div>
          <div class="num">{{ statisticsData.jcwKeyEquips }}</div>
        </div>
      </div>
      <div class="item">
        <div class="inner-item">
          <div class="span">其它设备（个）</div>
          <div class="num">{{ statisticsData.jcwOtherEquips }}</div>
        </div>
      </div>
    </div>
    <!-- 统计 -->

    <div class="inner-content-div">
      <!-- 线路基础统计 -->
      <div class="inner-content-card" style="margin-right: 10px">
        <!-- 标题 -->
        <div class="title">
          线路基础统计
          <!-- <i class="el-icon-more" /> -->
        </div>
        <!-- 标题 -->

        <!-- 线路基础统计图表 -->
        <div
          id="ColumnChart03"
          v-loading="loading1"
          class="echart01"
        />
        <!-- 线路基础统计图表 -->
      </div>
      <!-- 线路基础统计 -->

      <!-- 关键设备类型统计 -->
      <div class="inner-content-card" style="margin-right: 10px">
        <!-- 标题 -->
        <div class="title">
          关键设备类型统计
          <!-- <i class="el-icon-more" /> -->
        </div>
        <!-- 标题 -->

        <!-- 关键设备类型统计图表 -->
        <div
          id="PieChart02"
          v-loading="loading2"
          class="echart02"
        />
        <!-- 关键设备类型统计图表 -->
      </div>
      <!-- 关键设备类型统计 -->

      <!-- 设备台账统计 -->
      <div class="inner-content-card">
        <!-- 标题 -->
        <div class="title">
          设备台账统计
          <!-- <i class="el-icon-more" /> -->
        </div>
        <!-- 标题 -->

        <!-- 设备台账统计图表 -->
        <div
          id="PieChart03"
          v-loading="loading3"
          class="echart03"
        />
        <!-- 设备台账统计图表 -->
      </div>
      <!-- 设备台账统计 -->
    </div>
  </div>
</template>

<script>
import {
  getJcwDeviceBasisStatistics, getLineBasisStatistics, getDeviceTypeStatistics, getDeviceAccountDataStatistics,
  getJcwDeviceBasisStatisticsDj, getLineBasisStatisticsDj, getDeviceTypeStatisticsDj, getDeviceAccountDataStatisticsDj
} from '@/api/jjxt/data-center-home';
import { mapGetters } from 'vuex';
import { ColumnChart01, PieChart01, PieChart02 } from './common/js/EchartsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  name: 'JcwDeviceBasis',
  props: {
    unitCodeParams: {
      type: String,
      default() {
        return '';
      }
    },
    mCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      // loading
      loading1: false,
      loading2: false,
      loading3: false,

      // 统计数据
      statisticsData: {
        total: 0,
        anchors: 0,
        pillars: 0,
        jcwKeyEquips: 0,
        jcwOtherEquips: 0,
        echart01: {
          xAxisData: [],
          seriesData: []
        },
        echart02Data: [],
        echart03Data: []
      }
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {
    unitCodeParams() {
      this.statisticsData = {
        total: 0,
        anchors: 0,
        pillars: 0,
        jcwKeyEquips: 0,
        jcwOtherEquips: 0,
        echart01: {
          xAxisData: [],
          seriesData: []
        },
        echart02Data: [],
        echart03Data: []
      };
      this.getColumnChart01(); // 加载线路基础统计Echarts图表
      this.getPieChart01(); // 加载关键设备类型统计Echarts图表
      this.getPieChart02(); // 加载设备台账统计Echarts图表
      // if：供电部账号登录
      if (this.unitCodeParams === 'gd') {
        this.getJcwDeviceBasisStatistics(); // 查询接触网设备基础统计（局级）
        this.getLineBasisStatistics(); // 查询线路基础统计（局级）
        this.getDeviceTypeStatistics(); // 查询关键设备类型统计（局级）
        this.getDeviceAccountDataStatistics(); // 查询设备台账统计（局级）
      } else if (this.unitCodeParams !== '') {
        this.getJcwDeviceBasisStatisticsDj(); // 查询接触网设备基础统计（段级）
        this.getLineBasisStatisticsDj(); // 查询线路基础统计（段级）
        this.getDeviceTypeStatisticsDj(); // 查询关键设备类型统计（段级）
        this.getDeviceAccountDataStatisticsDj(); // 查询设备台账统计（段级）
      }
    }
  },
  methods: {
    // 查询接触网设备基础统计（局级）
    getJcwDeviceBasisStatistics() {
      // 查询接触网设备基础统计（局级）
      getJcwDeviceBasisStatistics().then(response => {
        this.statisticsData.total = response.data.total.toLocaleString();
        this.statisticsData.anchors = response.data.anchors.toLocaleString();
        this.statisticsData.pillars = response.data.pillars.toLocaleString();
        this.statisticsData.jcwKeyEquips = response.data.jcwKeyEquips.toLocaleString();
        this.statisticsData.jcwOtherEquips = response.data.jcwOtherEquips.toLocaleString();
      });
    },

    // 查询线路基础统计（局级）
    getLineBasisStatistics() {
      this.loading1 = true;
      // 查询线路基础统计（局级）
      getLineBasisStatistics().then(response => {
        this.statisticsData.echart01 = {
          xAxisData: ['区间', '站场'],
          seriesData: [response.data.areas, response.data.sites]
        };
        this.loading1 = false;
        this.getColumnChart01(); // 加载线路基础统计Echarts图表
      }).catch(() => {
        this.loading1 = false;
      });
    },

    // 查询关键设备类型统计（局级）
    getDeviceTypeStatistics() {
      this.loading2 = true;
      // 查询关键设备类型统计（局级）
      getDeviceTypeStatistics().then(response => {
        this.statisticsData.echart02Data = [];
        this.statisticsData.echart02LegendList = [];
        response.data.forEach(val => {
          this.statisticsData.echart02Data.push({ value: val.equipClassNums, name: val.equipClassName });
          this.statisticsData.echart02LegendList.push(val.equipClassName);
        });
        this.loading2 = false;
        this.getPieChart01(); // 加载关键设备类型统计Echarts图表
      }).catch(() => {
        this.loading2 = false;
      });
    },

    // 查询设备台账统计（局级）
    getDeviceAccountDataStatistics() {
      this.loading3 = true;
      // 查询设备台账统计（局级）
      getDeviceAccountDataStatistics().then(response => {
        this.statisticsData.echart03Data = [
          { value: response.data.jxRecords, name: '维修记录', itemStyle: { color: '#ffcc00' }, selected: true },
          { value: response.data.jcRecords, name: '静态测量记录', itemStyle: { color: '#98d87d' }},
          { value: response.data.xsRecords, name: '巡视记录', itemStyle: { color: '#ffd86e' }},
          { value: response.data.sbRecords, name: '更换记录', itemStyle: { color: '#ff99cc' }}
        ];
        this.loading3 = false;
        this.getPieChart02(); // 加载设备台账统计Echarts图表
      }).catch(() => {
        this.loading3 = false;
      });
    },

    // 查询接触网设备基础统计（段级）
    getJcwDeviceBasisStatisticsDj() {
      // 查询接触网设备基础统计（段级）
      getJcwDeviceBasisStatisticsDj({
        unitCodeParams: this.unitCodeParams,
        deptNo: this.mCode
      }).then(response => {
        this.statisticsData.total = response.data.total.toLocaleString();
        this.statisticsData.anchors = response.data.anchors.toLocaleString();
        this.statisticsData.pillars = response.data.pillars.toLocaleString();
        this.statisticsData.jcwKeyEquips = response.data.jcwKeyEquips.toLocaleString();
        this.statisticsData.jcwOtherEquips = response.data.jcwOtherEquips.toLocaleString();
      });
    },

    // 查询线路基础统计（段级）
    getLineBasisStatisticsDj() {
      this.loading1 = true;
      // 查询线路基础统计（段级）
      getLineBasisStatisticsDj({
        unitCodeParams: this.unitCodeParams,
        deptNo: this.mCode
      }).then(response => {
        this.statisticsData.echart01 = {
          xAxisData: ['区间', '站场'],
          seriesData: [response.data.areas, response.data.sites]
        };
        this.loading1 = false;
        this.getColumnChart01(); // 加载线路基础统计Echarts图表
      }).catch(() => {
        this.loading1 = false;
      });
    },

    // 查询关键设备类型统计（段级）
    getDeviceTypeStatisticsDj() {
      this.loading2 = true;
      // 查询关键设备类型统计（段级）
      getDeviceTypeStatisticsDj({
        unitCodeParams: this.unitCodeParams,
        deptNo: this.mCode
      }).then(response => {
        this.statisticsData.echart02Data = [];
        this.statisticsData.echart02LegendList = [];
        response.data.forEach(val => {
          this.statisticsData.echart02Data.push({ value: val.equipClassNums, name: val.equipClassName });
          this.statisticsData.echart02LegendList.push(val.equipClassName);
        });
        this.loading2 = false;
        this.getPieChart01(); // 加载关键设备类型统计Echarts图表
      }).catch(() => {
        this.loading2 = false;
      });
    },

    // 查询设备台账统计（段级）
    getDeviceAccountDataStatisticsDj() {
      this.loading3 = true;
      // 查询设备台账统计（段级）
      getDeviceAccountDataStatisticsDj({ unitCodeParams: this.unitCodeParams }).then(response => {
        this.statisticsData.echart03Data = [
          { value: response.data.jxRecords, name: '维修记录', itemStyle: { color: '#ffcc00' }, selected: true },
          { value: response.data.jcRecords, name: '静态测量记录', itemStyle: { color: '#98d87d' }},
          { value: response.data.xsRecords, name: '巡视记录', itemStyle: { color: '#ffd86e' }},
          { value: response.data.sbRecords, name: '更换记录', itemStyle: { color: '#ff99cc' }}
        ];
        this.loading3 = false;
        this.getPieChart02(); // 加载设备台账统计Echarts图表
      }).catch(() => {
        this.loading3 = false;
      });
    },

    // 加载线路基础统计Echarts图表
    getColumnChart01() {
      const myChart = echarts.init(document.getElementById('ColumnChart03'));
      ColumnChart01(myChart, this.statisticsData.echart01.xAxisData, this.statisticsData.echart01.seriesData); // 线路基础统计 - 柱状图
    },

    // 加载关键设备类型统计Echarts图表
    getPieChart01() {
      const myChart = echarts.init(document.getElementById('PieChart02'));
      PieChart01(myChart, this.statisticsData.echart02LegendList, this.statisticsData.echart02Data); // 关键设备类型统计 - 饼状图
    },

    // 加载设备台账统计Echarts图表
    getPieChart02() {
      const myChart = echarts.init(document.getElementById('PieChart03'));
      PieChart02(myChart, this.statisticsData.echart03Data); // 设备台账统计 - 饼状图
    },

    // 页面跳转
    gotoUrl(clientId, appName) {
      var _openUrl = '/module/jcwsc/basic-data/line';
      localStorage.setItem('appId', '');
      localStorage.setItem('clientId', clientId);
      localStorage.setItem('appName', appName);
      window.open(_openUrl);
    }
  }
};
</script>

<style lang="scss" scoped>
.content-card {
  position: relative;
  width: 1170px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #ebebeb;
  .title {
    color: #666666;
    padding: 5px 0 5px 10px;
    font-weight: 600;
    border-bottom: 1px solid #ebebeb;
    .el-icon-more {
      color: #676767;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
    .el-icon-more:hover {
      color: #54B2FC;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .statistics-content {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .item {
      display: flex;
      align-items: center;
      // justify-content: center;
      width: 100%;
      padding: 0 10px;
      .circle {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin-right: 30px;
      }
      .inner-item {
        font-size: 14px;
        color: #676767;
        line-height: 25px;
        .num {
          color: #666666;
          font-size: 20px;
          font-weight: 600;
        }
        .num:hover {
        color: #54B2FC;
        text-decoration: underline;
        cursor: pointer;
      }
      }
    }
  }
  .inner-content-div {
    width: 1170px;
    height: calc(100% - 98px);
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    .inner-content-card {
      position: relative;
      width: 390px;
      height: 100%;
      border: 1px solid #ebebeb;
      .title {
        color: #666666;
        padding: 5px 0 5px 10px;
        font-weight: 600;
        border-bottom: 1px solid #ebebeb;
        .el-icon-more {
          color: #676767;
          float: right;
          margin-right: 10px;
          cursor: pointer;
        }
        .el-icon-more:hover {
          color: #54B2FC;
          float: right;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .echart01 {
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0 auto;
      }
      .echart02 {
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0 auto;
      }
      .echart03 {
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0 auto;
      }
    }
  }
}
</style>
